<template>
  <div style=" width: 97%; margin: auto;">
    <h2>收费与服务情况</h2>
    <h3>会费情况</h3>
    <el-form :model="membership" ref="membershipRef" size="default" :rules="membershipRules" label-width="160px"
      style="margin-bottom: 50px;">
      <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
        <el-col style="margin-bottom: 15px;" :span="24">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">制定或修改会费标准的会议情况</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="meetingName" label="会议名称">
            <el-input v-model="membership.meetingName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="meetingTime" label="会议时间">
            <el-date-picker style="width: 100%;" v-model="membership.meetingTime" type="date" value-format="YYYY-MM-DD"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="voteMode" label="表决方式">
            <el-radio-group v-model="membership.voteMode">
              <el-radio :label="1">无记名投票</el-radio>
              <el-radio :label="2">举手表决</el-radio>
              <el-radio :label="3">鼓掌通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="wantAttendNum" label="应出席人数">
            <el-input type="number" v-model="membership.wantAttendNum" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="actualAttendNum" label="实际出席人数">
            <el-input type="number" v-model="membership.actualAttendNum" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="favorNum" label="赞同人数">
            <el-input v-model="membership.favorNum" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="opposeNum" label="反对人数">
            <el-input type="number" v-model="membership.opposeNum" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="waiverNum" label="弃权人数">
            <el-input type="number" v-model="membership.waiverNum" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="24">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">会费标准是否向全体会员公开</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="disclosure" label="会费标准向全体会员公开">
            <el-select clearable v-model="membership.disclosure" placeholder="请选择" style="width: 100%;">
              <el-option v-for="dict in shiOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="24">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">会费标准</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="24">
          <el-form-item prop="standard" label="按层级填写，示例：会长一年一缴xxx元">
            <el-input type="textarea" v-model="membership.standard" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <h3>收费情况</h3>
    <el-form :model="chargelist" ref="chargelistRef" size="default">
      <el-row>
        <el-col :span="24">
          <el-table :header-cell-style="{ background: '#F0F5FA', color: '#333333' }" size="default" :data="chargelist"
            border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="chargeTypeId" label="收费类型" align="center">
              <template #default="scope">
                <el-select clearable disabled v-model="scope.row.chargeTypeId" placeholder="请选择">
                  <el-option v-for="dict in sfTypeOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="chargeBasis" label="收费依据" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].chargeBasis'" :rules="chargelistRules.chargeBasis">
                  <el-input v-model="scope.row.chargeBasis" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="isPublic" label="是否公示" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].isPublic'" :rules="chargelistRules.isPublic">
                  <el-select clearable v-model="scope.row.isPublic" placeholder="请选择">
                    <el-option v-for="dict in shiOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="upTowIncome" label="前两年收入(万元)" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].upTowIncome'" :rules="chargelistRules.upTowIncome">
                  <el-input type="number" :disabled="scope.$index == 4" @input="inputupTowYear"
                    v-model="scope.row.upTowIncome" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="upIncome" label="上年收入(万元)" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].upIncome'" :rules="chargelistRules.upIncome">
                  <el-input type="number" :disabled="scope.$index == 4" @input="inputupYear"
                    v-model="scope.row.upIncome" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="thenIncome" label="当年收入(万元)" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].thenIncome'" :rules="chargelistRules.thenIncome">
                  <el-input @input="inputThenYear" :disabled="scope.$index == 4" type="number"
                    v-model="scope.row.thenIncome" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getDictByCode, getTableInfoByPage, stIncome } from '@/views/yearCheck/ykb/st/st'
export default {
  data() {
    return {
      sexOptions: [{ id: '1', name: '男' }, { id: '2', name: '女' }],
      shiOptions: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      sfTypeOptions: [{ id: 132, name: '行政事业性收费' }, { id: 133, name: '经营服务性收费' }, {
        id: 131,
        name: '会费'
      }, { id: 135, name: '合计' }, { id: 134, name: '其他' }],
      membership: {
        actualAttendNum: '',//实际出席人数
        creditCode: localStorage.getItem('creditCode'),
        disclosure: '',//会费标准向全体会员公开
        examineYear: localStorage.getItem('examineYear'),//审查年度
        favorNum: '',//赞成人数
        id: '',//
        meetingName: '',//
        meetingTime: '',//($date-time)
        opposeNum: '',//反对人数
        organizationBaseId: '1',//社团组织id
        standard: '',//会费标准
        voteMode: '',//表决方式：1-无记名投票、2-举手表决 3-鼓掌通过
        waiverNum: '',//弃权人数
        wantAttendNum: ''//应出席人数
      },
      membershipRules: {
        actualAttendNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        disclosure: [{ required: true, message: '请完善', trigger: 'blur' }],
        favorNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        meetingName: [{ required: true, message: '请完善', trigger: 'blur' }],
        meetingTime: [{ required: true, message: '请完善', trigger: 'blur' }],
        opposeNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        standard: [{ required: true, message: '请完善', trigger: 'blur' }],
        voteMode: [{ required: true, message: '请完善', trigger: 'blur' }],
        waiverNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        wantAttendNum: [{ required: true, message: '请完善', trigger: 'blur' }]
      },
      chargelistRules: {
        chargeBasis: [{ required: true, message: '请完善', trigger: 'blur' }],
        isPublic: [{ required: true, message: '请完善', trigger: 'blur' }],
        upTowIncome: [{ required: true, message: '请完善', trigger: 'blur' }],
        upIncome: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenIncome: [{ required: true, message: '请完善', trigger: 'blur' }]
      },
      postCharge: {
        chargeBasis: '',//收费依据
        chargeTypeId: '',//收费类型id
        chargeTypeName: '',//收费类型名称
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        examineYear: localStorage.getItem('examineYear'),//审查年度
        id: '',//
        isPublic: '',//是否公示：0-否、1-是
        organizationBaseId: '',//社团组织id
        thenIncome: '',//当年收入
        upIncome: '',//上年收入
        upTowIncome: ''//前两年收入
      },
      chargelist: []
    }
  },
  created() {

  },
  methods: {
    inputThenYear() {
      this.chargelist[4].thenIncome = this.getStr(this.chargelist[0].thenIncome) + this.getStr(this.chargelist[1].thenIncome) +
        this.getStr(this.chargelist[2].thenIncome) + this.getStr(this.chargelist[3].thenIncome);
    },
    inputupYear() {
      this.chargelist[4].upIncome = this.getStr(this.chargelist[0].upIncome) + this.getStr(this.chargelist[1].upIncome) +
        this.getStr(this.chargelist[2].upIncome) + this.getStr(this.chargelist[3].upIncome);
    },
    inputupTowYear() {
      this.chargelist[4].upTowIncome = this.getStr(this.chargelist[0].upTowIncome) + this.getStr(this.chargelist[1].upTowIncome) +
        this.getStr(this.chargelist[2].upTowIncome) + this.getStr(this.chargelist[3].upTowIncome);
    },
    getStr(str) {
      if (str == null || str == '') {
        str = 0
      } else {
        str = parseFloat(str)
      }
      return str
    },
    postInfo() {
      this.membership.creditCode = localStorage.getItem('creditCode')
      this.membership.examineYear = localStorage.getItem('examineYear')
      for (let i = 0; i < this.chargelist.length; i++) {
        this.chargelist[i].creditCode = localStorage.getItem('creditCode')
        this.chargelist[i].examineYear = localStorage.getItem('examineYear')
      }
      this.$refs.membershipRef.validate(valid => {
        if (valid) {
          this.$refs.chargelistRef.validate(valid => {
            if (valid) {
              let data = {
                chargelist: null,
                membership: null,
                examineYear: localStorage.getItem('examineYear'),
                creditCode: localStorage.getItem('creditCode')
              }
              data.chargelist = this.chargelist
              data.membership = this.membership
              stIncome(data).then(response => {
                this.$message({
                  message: '收费与服务情况保存成功',
                  type: 'success'
                })
                this.getInfo()
              })
            } else {
              this.$message({
                message: '请填写完整',
                type: 'error'
              })
            }
          })
        } else {
          this.$message({
            message: '请填写完整',
            type: 'error'
          })
        }
      })

    },
    getInfo() {
      getTableInfoByPage(12).then(response => {
        this.membership = response.data.membership
        this.chargelist = response.data.chargelist
        if (this.chargelist == null) {
          this.chargelist = []
        }
        if (this.membership == null) {
          this.membership = {
            actualAttendNum: '',//实际出席人数
            creditCode: localStorage.getItem('creditCode'),
            disclosure: '',//会费标准向全体会员公开
            examineYear: localStorage.getItem('examineYear'),//审查年度
            favorNum: '',//赞成人数
            id: '',//
            meetingName: '',//
            meetingTime: '',//($date-time)
            opposeNum: '',//反对人数
            organizationBaseId: '1',//社团组织id
            standard: '',//会费标准
            voteMode: '',//表决方式：1-无记名投票、2-举手表决 3-鼓掌通过
            waiverNum: '',//弃权人数
            wantAttendNum: ''//应出席人数
          }
        }
        if (this.membership.disclosure != null && this.membership.disclosure != '') {
          this.membership.disclosure = Number(this.membership.disclosure)
        }
      })
      //政治面貌politics 学历xueli
      getDictByCode('politics').then(response => {
        this.politicsOptions = response.data
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color: #e0e5f0;
}

:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}

.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 16px;
}

.custom-select .el-select-dropdown {
  max-height: 600px;
  /* 设置为你想要的高度 */
  overflow: auto;
  /* 添加滚动条 */
}

table {
  border-collapse: collapse;
  /* 确保表格的边框合并为单一边框 */
  width: 100%;
  /* 表格宽度 */
}

td {
  border: 1px solid #ababab;
  /* 设置单线边框 */
  padding: 6px;
  /* 单元格内边距 */
}

.el-form-item {
  margin-bottom: 0px;
}

:deep(.el-form-item__label) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  height: 32px;
  line-height: 16px;
}
</style>
